<template>
  <div class="usage-example">
    <h2>全局 ConfirmButton 组件使用示例</h2>

    <div class="example-section">
      <h3>1. 基础用法（无需导入）</h3>
      <confirm-button @confirm="handleBasicConfirm">删除文件</confirm-button>
    </div>

    <div class="example-section">
      <h3>2. 在表格中使用</h3>
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="role" label="角色" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <confirm-button size="small" type="danger" text="删除" @confirm="deleteUser(row)" />
            <confirm-button
              size="small"
              type="warning"
              text="重置密码"
              confirm-text="确定要重置该用户的密码吗？"
              @confirm="resetPassword(row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="example-section">
      <h3>3. 在表单中使用</h3>
      <el-form :model="form" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item>
          <confirm-button
            type="primary"
            text="保存"
            confirm-text="确定要保存吗？"
            @confirm="saveForm"
          />
          <confirm-button
            type="danger"
            text="清空"
            confirm-text="确定要清空所有数据吗？"
            @confirm="clearForm"
          />
        </el-form-item>
      </el-form>
    </div>

    <div class="example-section">
      <h3>4. 自定义超时时间</h3>
      <confirm-button
        text="格式化代码"
        confirm-text="确定要格式化代码吗？"
        :confirm-timeout="10000"
        @confirm="formatCode"
      />
      <span class="tip">（10秒后自动恢复）</span>
    </div>

    <div class="example-section">
      <h3>5. 不同按钮类型</h3>
      <confirm-button text="发布" type="success" @confirm="publish" />
      <confirm-button text="下架" type="warning" @confirm="unpublish" />
      <confirm-button text="删除" type="danger" @confirm="deleteItem" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 模拟用户数据
const userList = ref([
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    role: '管理员'
  },
  {
    id: 2,
    name: '李四',
    email: 'lisi@example.com',
    role: '编辑'
  },
  {
    id: 3,
    name: '王五',
    email: 'wangwu@example.com',
    role: '用户'
  }
]);

// 表单数据
const form = ref({
  username: '',
  email: ''
});

// 基础确认
const handleBasicConfirm = () => {
  ElMessage.success('文件删除成功');
};

// 删除用户
const deleteUser = (user: any) => {
  const index = userList.value.findIndex(item => item.id === user.id);
  if (index > -1) {
    userList.value.splice(index, 1);
    ElMessage.success(`已删除用户：${user.name}`);
  }
};

// 重置密码
const resetPassword = (user: any) => {
  ElMessage.success(`已重置用户 ${user.name} 的密码`);
};

// 保存表单
const saveForm = () => {
  ElMessage.success('表单保存成功');
};

// 清空表单
const clearForm = () => {
  form.value = {
    username: '',
    email: ''
  };
  ElMessage.success('表单已清空');
};

// 格式化代码
const formatCode = () => {
  ElMessage.success('代码格式化完成');
};

// 发布
const publish = () => {
  ElMessage.success('内容发布成功');
};

// 下架
const unpublish = () => {
  ElMessage.success('内容已下架');
};

// 删除
const deleteItem = () => {
  ElMessage.success('删除操作完成');
};
</script>

<style lang="scss" scoped>
.usage-example {
  padding: 20px;

  h2 {
    margin-bottom: 20px;
    color: #303133;
    border-bottom: 2px solid #409eff;
    padding-bottom: 10px;
  }

  .example-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    background: #fafafa;

    h3 {
      margin-bottom: 15px;
      color: #606266;
      font-size: 16px;
    }

    .tip {
      margin-left: 10px;
      color: #909399;
      font-size: 12px;
    }

    .el-button {
      margin-right: 10px;
    }
  }
}
</style>
